<template>

  <mt-tabbar v-model="selected" :fixed="true">
    <mt-tab-item id="/" @click.native="indexTabFn">
      <img slot="icon" src="../assets/icon_home.png">
      <img slot="icon" src="../assets/icon_home1.png">
      首页
    </mt-tab-item>
    <mt-tab-item  id="/find" @click.native="findTabFn">
      <img slot="icon" src="../assets/icon_fx.png">
      <img slot="icon" src="../assets/icon_fx1.png">
      发现
    </mt-tab-item>
    <mt-tab-item id="/attent" @click.native="attentTabFn">
      <img slot="icon" src="../assets/icon_gz.png">
      <img slot="icon" src="../assets/icon_gz1.png">
      关注
    </mt-tab-item>
    <mt-tab-item id="/admin" @click.native="adminTabFn">
      <img slot="icon" src="../assets/icon_my.png">
      <img slot="icon" src="../assets/icon_my1.png">
      我的
    </mt-tab-item>
  </mt-tabbar>

</template>

<script>
import { Tabbar, TabItem } from 'mint-ui'
export default {
  data () {
    return {
      selected: '/'
    }
  },
  methods: {
    indexTabFn () {
      this.$router.replace('/')
    },
    findTabFn () {
      this.$router.replace('/find')
    },
    attentTabFn () {
      this.$router.replace('/attent')
    },
    adminTabFn () {
      this.$router.replace('/admin')
    }
  },
  watch: {
  },
  components: {
    mtTabbar: Tabbar,
    mtTabItem: TabItem
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.mint-tabbar { border-top:#ededed 1px solid;}
.mint-tab-item-icon { width: 30px; height: 30px;}
.mint-tab-item-icon img:nth-of-type(2n){ display: none;}
.mint-tab-item-label { font-size: 14px; color: #d2d2d2;}
.mint-tabbar .mint-tab-item.is-selected { background: none;}
.mint-tab-item.is-selected .mint-tab-item-label{ color: #ff9a09;}
.mint-tab-item.is-selected img { display: none;}
.mint-tab-item.is-selected img:nth-child(2n){ display: block;}
</style>
